<style lang="scss">
.count {
  height: 100%;
  .el-collapse {
    position: relative;
    .el-collapse-item__header {
      background: #e5f1fb;
      border-left: 2px solid #2387e2;
      color: #000;
      padding-left: 16px;
    }
    .el-collapse-item__content {
      padding-bottom: 0;
      position: absolute;
      top: 49px;
      left: 0;
      z-index: 999;
      width: 100%;
    }
  }
  .el-main {
    padding: 16px 16px 0px 16px;
    .cs-count {
      border: 1px solid #eeeeee;
      .count-search {
        background: #e5f1fb;
        border-left: 2px solid #2387e2;
        padding: 10px 12px;
        .is-active {
          .el-radio-button__inner {
            background-color: #409eff;
            border-color: #409eff;
          }
        }
        .search-my {
          float: left;
          margin-bottom: 7px;
        }
        .search-month {
          float: left;
          margin-left: 7px;
          .el-range__close-icon {
            display: none;
          }
        }
        .search-source {
          clear: both;
          margin: 7px 0;
        }
        .search-btn {
        }
        .count-head {
          float: left;
          font-size: 16px;
          color: #409eff;
          padding-right: 88px;
        }
      }
      .count-title {
        // background: #F0F0F0;
        height: 36px;
        line-height: 36px;
        text-align: center;
        font-weight: bold;
        border-bottom: 1px solid #eeeeee;
        .count-sort {
          display: block;
          float: left;
          width: 4%;
        }
        .count-item {
          display: block;
          float: left;
          width: 13%;
        }
      }
      .count-data {
        height: 270px;
        .count-csdata {
          text-align: center;
          height: 30px;
          line-height: 30px;
          border-bottom: 1px solid #eeeeee;
          .count-sort {
            display: block;
            float: left;
            width: 4%;
          }
          .count-item {
            display: block;
            float: left;
            width: 13%;
          }
        }
      }
    }
    .el-table {
      height: calc(100vh - 215px);
      margin-top: 7px;
      // height: 311px;
      th.is-leaf {
        border-bottom: 1px solid #ebeef5;
        padding: 6px 0;
        background: #fff;
      }
      .el-table__row {
        td {
          padding: 10px 0 !important;
        }
      }
    }
    // 处室处理时效
    .cs-effiency {
      border: 1px solid #eeeeee;
      margin-top: 24px;
      .effiency-search {
        background: #e5f1fb;
        border-left: 4px solid #2387e2;
        height: 42px;
        line-height: 42px;
        padding-left: 12px;
        position: relative;
        .is-active {
          .el-radio-button__inner {
            background-color: #409eff;
            border-color: #409eff;
          }
        }
        .search-my {
          position: absolute;
          top: 0px;
          right: 466px;
        }
        .search-month {
          position: absolute;
          top: 0px;
          right: 12px;
          .el-range__close-icon {
            display: none;
          }
        }
        .effiency-head {
          float: left;
          font-size: 16px;
          color: #409eff;
          padding-right: 70px;
        }
      }
      .effiency-data {
        text-align: center;
        width: 100%;
        height: 380px;
        padding-top: 20px;
      }
    }
  }
  // 导出文件下载弹框
  .download-dialog {
    .el-form {
      height: calc(100vh - 320px);
      overflow-y: auto;
      padding-top: 24px;
      .el-upload {
        width: 100%;
        .el-upload-dragger {
          width: 100%;
          height: 160px;
        }
      }
    }
    .gdxx-file {
      a {
        text-decoration: none;
        color: #308ee5;
        padding-right: 36px;
      }
      .file-btn {
        color: #308ee5;
        text-decoration: underline;
        padding: 0 4px;
        cursor: pointer;
      }
      .file-btn:hover {
        color: blue;
      }
    }
  }
  .show_data {
    margin: 10px 0;
    width: 100%;
    overflow: hidden;
    .datas {
      width: calc(100% - 150px);
      float: left;
    }
    .btn {
      text-align: right;
      width: 150px;
      float: right;
    }
  }
}
</style>

<template>
  <el-container  v-loading="manloading" element-loading-text="拼命加载中" class="count">
    <!-- 主要区域容器 -->
    <el-main >
      <div class="cs-count">
        <el-collapse v-model="activeNames" @change="handleCollapseChange">
          <el-collapse-item name="1">
            <template slot="title">
              <i class="header-icon el-icon-question"></i>统计查询条件<i
                class="header-icon el-icon-question"
              ></i>
            </template>
            <div class="count-search">
              <div class="search-my">
                <el-radio-group
                  v-model="countMonth"
                  size="mini"
                  @change="deptCountItemChange"
                >
                  <el-radio-button label="1">本月</el-radio-button>
                  <el-radio-button label="2">上月</el-radio-button>
                  <el-radio-button label="3">本年</el-radio-button>
                  <el-radio-button label="4">去年</el-radio-button>
                </el-radio-group>
              </div>
              <div class="search-month">
                <span class="demonstration">自定义：</span>
                <el-date-picker
                  v-model="countMonthValue"
                  type="monthrange"
                  align="right"
                  unlink-panels
                  size="mini"
                  range-separator="至"
                  start-placeholder="开始月份"
                  end-placeholder="结束月份"
                  value-format="yyyy-MM"
                  :picker-options="pickerOptions"
                  @change="deptCountDefineChange"
                ></el-date-picker>
              </div>
              <div class="search-source">
                <el-radio-group
                  v-model="sourceId"
                  size="small"
                  @change="deptCountSourceChange"
                >
                  <el-radio-button
                    :label="item.lyid"
                    v-for="(item, index) in sourceList"
                    :key="index"
                    >{{ item.lymc }}</el-radio-button
                  >
                </el-radio-group>
              </div>
              <div class="search-btn">
                <el-button
                  type="primary"
                  plain
                  size="mini"
                  @click="doSearch"
                  icon="el-icon-refresh"
                  >查询</el-button
                >
                <el-button
                  type="info"
                  plain
                  size="mini"
                  @click="doCountReset"
                  icon="el-icon-refresh"
                  >重置</el-button
                >
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
        <div class="show_data">
          <div class="datas"></div>
          <div class="btn">
            <el-button
              type="primary"
              plain
              size="mini"
              @click="doExport"
              icon="el-icon-document-copy"
              >导出</el-button
            >
          </div>
        </div>
        <el-table
          v-if="deptCountData[0]"
          :data="deptCountData"
          show-summary
          :summary-method="getSummaries"
          style="width: 100%"
          :height="tableHeight"
          v-loading="loadingTable"
        >
          <el-table-column
            type="index"
            label="排序"
            width="100"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="deptName"
            label="责任处室"
            width="200"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="workNumber"
            label="工单数量(件)"
            align="center"
          >
            <template slot-scope="scope">
              <span style="color: #20d8ee">{{ scope.row.workNumber }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="overNumber" label="已办理(件)" align="center">
            <template slot-scope="scope">
              <span style="color: #3bc852">{{ scope.row.overNumber }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="intoNumber" label="办理中(件)" align="center">
            <template slot-scope="scope">
              <span style="color: #fa8136">{{ scope.row.intoNumber }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="dueNumber" label="超期(件)" align="center">
            <template slot-scope="scope">
              <span style="color: #e67373">{{ scope.row.dueNumber }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="backNumber" label="退回(件)" align="center">
            <template slot-scope="scope">
              <span style="color: #f476ab">{{ scope.row.backNumber }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="unNumber" label="不满意(件)" align="center">
            <template slot-scope="scope">
              <span style="color: #436af2">{{ scope.row.unNumber }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="unNumber" label="紧急(件)" align="center">
            <template slot-scope="scope">
              <span style="color: #b479fc">{{
                scope.row.importantNumber
              }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="complaintNumber" label="投诉举报(件)" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.complaintNumber }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="adviseNumber" label="建议意见(件)" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.adviseNumber }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="questionNumber" label="咨询服务(件)" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.questionNumber }}</span>
            </template>
          </el-table-column> -->
        </el-table>
      </div>
    </el-main>

    <!-- 导出文件下载 -->
    <el-dialog
      class="download-dialog"
      title="导出文件下载"
      :visible.sync="downloadDetail"
      width="80%"
      :before-close="dialogDownloadCloseFn"
    >
      <el-form :model="formItemData" label-width="200px">
        <el-row class="gdxx-file" style="margin-top: 20px;">
          <el-col :span="20" :offset="1">
            <el-form-item label="综合查询文件：">
              <!-- formItemData.fileEntity.filePath -->
              <a href="javascript:void(0)">{{ formItemData.fileName }}</a>
              <span class="file-btn" @click="exportFilePreview">查看</span>
              <span class="file-btn" @click="exportFileDownload">下载</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </el-container>
</template>

<script>
// 引入基本模板
// 引入环形图图组件
import 'echarts/lib/chart/pie'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/line'
// 引入提示框和title组件
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
let echarts = require('echarts/lib/echarts')

export default {
  data () {
    return {
      // 处室查询条件
      countPojo: {
        dateList: '',
        dateItem: '3',
        dateType: 'i',
        sourceId: ''
      },
      // 查询条件折叠面板
      activeNames: [],
      deptCountData: [],
      pickerOptions: {
        shortcuts: [
          {
            text: '今年至今',
            onClick (picker) {
              const end = new Date()
              const start = new Date(new Date().getFullYear(), 0)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setMonth(start.getMonth() - 3)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近六个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setMonth(start.getMonth() - 6)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      // 来源列表
      sourceList: [{ lyid: '', lymc: '全部' }],
      // 表格高度
      tableHeight: -1,
      loadingTable: false,
      loadingCharts: false,
      countMonth: '3',
      effiencyMonth: '3',
      countMonthValue: '',
      effiencyMonthValue: '',
      sourceId: '',
      // 处室办理时效统计
      deptEffiecyData: {
        name: '',
        efficiency: '',
        unsatisfy: ''
      },
      downloadDetail: false,
      fullScreen: true,
      // 导出生成文件
      formItemData: {
        fileName: '',
        filePath: '',
        filePreview: ''
      },
      manloading:true
    }
  },
  methods: {
    // 获取来源列表
    getSourceList () {
      this.$axios.post(this.$api.source.selector).then(rs => {
        if (rs) {
          let sourcePojoList = rs
          this.sourceList = this.sourceList.concat(sourcePojoList)
        }
      })
    },
    doSearch () {
      this.activeNames = []
      this.getDeptCounts()

      //  this.deptCountItemChange()
      //  this.deptCountDefineChange()
      //  this.deptCountSourceChange()
    },
    // 查询方法
    deptCountItemChange () {
      this.countMonthValue = ''
      this.countPojo.dateType = 'i'
      // this.getDeptCounts()
    },
    deptCountDefineChange () {
      this.countMonth = ''
      this.countPojo.dateType = 'd'
      // this.getDeptCounts()
    },
    deptCountSourceChange () {
      // this.getDeptCounts()
    },
    // 条件重置
    doCountReset () {
      this.countMonth = '3'
      this.countMonthValue = ''
      this.countPojo.dateType = 'i'
      this.sourceId = ''
      this.getDeptCounts()
    },
    // 导出
    doExport () {
      const _this = this
      _this
        .$confirm('导出文件耗时比较长，是否继续?', '提示', {
          cancelButtonText: '取消',
          confirmButtonText: '确定',
          type: 'warning'
        })
        .then(() => {
          const _this = this
          _this.countPojo.dateList = _this.countMonthValue
          _this.countPojo.dateItem = _this.countMonth
          _this.countPojo.sourceId = _this.sourceId
          _this.loadingTable = true
          _this.$axios
            .post(_this.$api.export.deptCount, _this.countPojo)
            .then(rs => {
              if (rs) {
                _this.loadingTable = false
                _this.formItemData = Object.assign(this.formItemData, rs)
                _this.downloadFn()
                // window.open(rs.filePath + '?attname=综合查询导出网络理政工单.xlsx')
              }
            })
        })
        .catch(() => {
          return false
        })
    },
    // 导出文件下载
    downloadFn () {
      this.downloadDetail = true
    },
    dialogDownloadCloseFn: function () {
      this.downloadDetail = false
    },
    // 文件预览
    exportFilePreview () {
      let fileUrl = this.formItemData.filePath
      this.$previewFile(fileUrl)
    },
    // 文件下载
    exportFileDownload () {
      let fileUrl = this.formItemData.filePath
      console.log('fileUrl', fileUrl)
      this.$downloadFile(fileUrl, '工单统计导出工单数据.xlsx')
    },
    // 折叠面板操作
    handleCollapseChange (val) {},
    // 处室办理量统计
    getDeptCounts () {
      const _this = this
      _this.countPojo.dateList = _this.countMonthValue
      _this.countPojo.dateItem = _this.countMonth
      _this.countPojo.sourceId = _this.sourceId
      this.manloading=true
      _this.loadingTable = true
      this.$axios
        .post(this.$api.countCharts.deptHandleCounts, _this.countPojo)
        .then(rs => {
          if (rs) {
              this.manloading=false
            _this.loadingTable = false
            _this.deptCountData = rs
            console.log(rs)
          }
        })
    },
    getSummaries (param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总件数'
          return
        }
        if (index === 1) {
          sums[index] = ''
          return
        }
        const values = data.map(item => Number(item[column.property]))

        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[index] += ''
        } else {
          sums[index] = 'N/A'
        }
      })
      return sums
    },
    // 查询方法
    deptEffiencyItemChange () {
      this.effiencyMonthValue = ''
      this.countPojo.dateType = 'i'
      this.getDeptEffityCharts()
    },
    deptEffiencyDefineChange () {
      this.effiencyMonth = ''
      this.countPojo.dateType = 'd'
      this.getDeptEffityCharts()
    },
    // 条件重置
    doEffiencyReset () {
      this.effiencyMonth = '3'
      this.effiencyMonthValue = ''
      this.countPojo.dateType = 'i'
      this.getDeptEffityCharts()
    },
    // 个处理办理时效统计
    getDeptEffityCharts () {
      const _this = this
      _this.countPojo.dateList = _this.effiencyMonthValue
      _this.countPojo.dateItem = _this.effiencyMonth
      // console.log(_this.countPojo);
      _this.loadingCharts = true
      _this.$axios
        .post(
          _this.$api.countCharts.deptHandleEfficiencyCharts,
          _this.countPojo
        )
        .then(rs => {
          if (rs) {
            _this.deptEffiecyData = rs
            _this.loadingCharts = false
            // console.log(this.deptEffiecyData)
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(_this.$refs.deptEffityChartDiv)
            if (!myChart) return
            // 绘制图表
            myChart.setOption({
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  // 坐标轴指示器，坐标轴触发有效
                  type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
              },
              grid: {
                top: '48px',
                bottom: '62px',
                left: '56px',
                right: '56px',
                containLabel: false
              },
              calculable: false,
              legend: {
                data: ['处理时效(天)', '满意率(%)'],
                y: 'bottom',
                selectedMode: false // 取消图例上的点击事件
              },
              xAxis: [
                {
                  type: 'category',
                  data: _this.deptEffiecyData.name.split(','),
                  axisLabel: {
                    // 调整x轴的lable
                    interval: 0, // 全部显示
                    clickable: false, // 可点击
                    textStyle: {
                      fontSize: 14 // 让字体变大
                    }
                  }
                }
              ],
              yAxis: [
                {
                  type: 'value',
                  scale: true,
                  name: '处理时效(天)',
                  min: 0,
                  max: 10,
                  boundaryGap: [0.2, 0.2],
                  axisLabel: {
                    // 调整y轴的lable
                    textStyle: {
                      fontSize: 14 // 让字体变大
                    }
                  },
                  nameTextStyle: {
                    fontSize: 14,
                    fontFamily: 'Microsoft YaHei,微软雅黑'
                  }
                },
                {
                  name: '满意率(%)',
                  type: 'value',
                  scale: true,
                  min: 0,
                  max: 100,
                  boundaryGap: [0.2, 0.2],
                  axisLabel: {
                    // 调整y轴的lable
                    textStyle: {
                      fontSize: 14 // 让字体变大
                    }
                  },
                  nameTextStyle: {
                    fontSize: 14,
                    fontFamily: 'Microsoft YaHei,微软雅黑'
                  }
                }
              ],
              series: [
                {
                  data: this.deptEffiecyData.unsatisfy.split(','),
                  name: '满意率(%)',
                  type: 'line',
                  yAxisIndex: 1,
                  smooth: true,
                  showSymbol: true,
                  symbol: 'circle', // 设定为实心点
                  symbolSize: 14, // 设定实心点的大小
                  itemStyle: {
                    normal: {
                      color: '#A6C75A',
                      lineStyle: {
                        color: '#A6C75A'
                      }
                    }
                  },
                  markPoint: {
                    data: [
                      // { type: "max", name: "最大值" },
                      { type: 'min', name: '最小值' }
                    ],
                    itemStyle: {
                      normal: {
                        color: '#A6C75A'
                      }
                    }
                  }
                },
                {
                  data: this.deptEffiecyData.efficiency.split(','),
                  name: '处理时效(天)',
                  type: 'line',
                  smooth: true,
                  showSymbol: true,
                  symbol: 'circle', // 设定为实心点
                  symbolSize: 14, // 设定实心点的大小
                  itemStyle: {
                    normal: {
                      color: '#5AB1EF',
                      lineStyle: {
                        color: '#5AB1EF'
                      }
                    }
                  },
                  markPoint: {
                    data: [
                      { type: 'max', name: '最大值' },
                      { type: 'min', name: '最小值' }
                    ],
                    itemStyle: {
                      normal: {
                        color: '#5AB1EF'
                      }
                    }
                  }
                }
              ]
            })
          }
        })
    }
  },
  created: function () {
    this.getSourceList()
    this.getDeptCounts()
    // this.getDeptEffityCharts()
  }
}
</script>
